<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  xmlns:th="http://www.thymeleaf.org"
>
<body>
<div layout:fragment="content" id="index" v-cloak>
  <div class="container container-home">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="webcome">
          <div class="webcome__avator">
            <img src="/static/img/icon/user.png" alt=""/>
          </div>
          <div class="webcome__info">
            <div class="webcome__tit">
              尊敬的{{userInfo.userName}}, <br/>
              <p><span>管理级别：</span>{{userInfo.roleName}}</p>
              欢迎光临信息安全管理系统！
            </div>
            <div class="webcome__dd">您上次登录时间：{{userInfo.lastLoginTime}} <br/>来源IP为：{{userInfo.lastLoginIp}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="home-title h01">
          基础数据统计
        </div>
        <el-row>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">经营单位</div>
              <div class="count__value">
                <span>{{otherList.baseOperCompanyNotReport}}</span>
                <span>{{totalList.baseOperCompany}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">用户数据</div>
              <div class="count__value">
                <span>0</span>
                <span>{{totalList.baseCustomer}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">机房数据</div>
              <div class="count__value">
                <span>{{otherList.baseHouseInfoNotReport}}</span>
                <span>{{totalList.baseHouseInfo}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">负责人</div>
              <div class="count__value">
                <span>{{otherList.baseHouseOfficerNotReport}}</span>
                <span>{{totalList.baseHouseOfficer}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">机房IP</div>
              <div class="count__value">
                <span>{{otherList.baseIpAddressInfoNotReport}}</span>
                <span>{{totalList.baseIpAddressInfo}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="home-title h02">
          安全指令统计
        </div>
        <el-row>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">管控指令</div>
              <div class="count__value">
                <span>{{totalList.insAdminControl}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">日志查询指令</div>
              <div class="count__value">
                <span>{{otherList.insAccessLogQueryNotReport}}</span>
                <span>{{totalList.insAccessLogQuery}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">工单指令</div>
              <div class="count__value">
                <span>{{totalList.insWorkOrder}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">监测指令</div>
              <div class="count__value">
                <span>{{otherList.insMonitorNotReport}}</span>
                <span>{{totalList.insMonitor}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            &nbsp;
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">过滤指令</div>
              <div class="count__value">
                <span>{{otherList.insFilterNotReport}}</span>
                <span>{{totalList.insFilter}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="home-title h03">
          违法监控统计
        </div>
        <el-row>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">异常IP</div>
              <div class="count__value">
                <span>{{otherList.slogAbnormalIpNotReport}}</span>
                <span>{{totalList.slogAbnormalIp}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">备案监控</div>
              <div class="count__value">
                <span>{{otherList.moFilingSuperviseNotReport}}</span>
                <span>{{totalList.moFilingSupervise}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">违法网站</div>
              <div class="count__value">
                <span>{{otherList.slogIllegalSiteNotReport}}</span>
                <span>{{totalList.slogIllegalSite}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">非法信息</div>
              <div class="count__value">
                <span>{{otherList.moIllegalInfoNotReport}}</span>
                <span>{{totalList.moIllegalInfo}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">&nbsp;</el-col>
          <el-col :span="12">
            <div class="count">
              <div class="count__label">非法多媒体</div>
              <div class="count__value">
                <span>{{otherList.rIllegalMediaNotReport}}</span>
                <span>{{totalList.rIllegalMedia}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <div style="margin-bottom:20px">
      <div class="home-grid">
        <template v-for="item in homeGridCardList">
          <home-grid-card
            :url="item.url"
            :img="item.img"
            :title="item.title"
            :count-function="item.countFunction"
            :params="item.params"
          ></home-grid-card>
        </template>
        <div class="home-grid__li" style="cursor:pointer;" @click="openModuleListDialog">
          <div class="home-grid__card">
            <img src="/static/img/icon/10.png" alt=""/>
          </div>
          <div class="home-grid__name">新增模块</div>
        </div>
      </div>
    </div>

    <el-dialog
      title="新增模块"
      :visible.sync="moduleListDialogVisible"
      width="50%">
      <el-row>
        <el-checkbox-group v-model="selectedModuleIds">
          <div class="home-grid">
            <template v-for="item in sourceGridCardList">
              <el-checkbox :label="item['_id']" :key="item['_id']">
                <home-grid-card
                  :img="item.img"
                  :title="item.title"
                ></home-grid-card>
              </el-checkbox>
            </template>
          </div>
        </el-checkbox-group>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moduleListDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveModuleList">确 定</el-button>
      </span>
    </el-dialog>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="box">
          <div class="table-title">
            <div class="table-title__name">
              风险警示：发现非法多媒体警示榜
            </div>
            <div class="table-title__btn" style="cursor:pointer;" onclick="forward('illegal-monitor/admin_multimedia')">
              查看更多
            </div>
          </div>
          <el-table :data="illegalMultimediaTableData" style="width: 100%">
            <el-table-column type="index" width="50" label="排行">
              <template slot-scope="scope">
                                                <span :style="scope.$index < 3 ? 'color:#ff9000' :''"> {{ scope.$index+1
                                                    }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ownedDomain" label="所属域名"></el-table-column>
            <el-table-column prop="discoveryNum" label="发现数量"></el-table-column>
            <el-table-column prop="disposalsNum" label="被处置数量"></el-table-column>
            <el-table-column prop="visitsTotal" label="总访问量"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="box">
          <div class="table-title">
            <div class="table-title__name">
              风险警示：发现非法信息警示榜
            </div>
            <div class="table-title__btn" style="cursor:pointer;" onclick="forward('illegal-monitor/admin_illegal')">
              查看更多
            </div>
          </div>
          <el-table :data="illegalInfoTableData" style="width: 100%">
            <el-table-column type="index" width="50" label="排行">
              <template slot-scope="scope">
                                                <span :style="scope.$index < 3 ? 'color:#ff9000' :''"> {{ scope.$index+1
                                                    }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ownedDomain" label="所属域名"></el-table-column>
            <el-table-column prop="discoveryNum" label="发现数量"></el-table-column>
            <el-table-column prop="disposalsNum" label="被处置数量"></el-table-column>
            <el-table-column prop="visitsTotal" label="总访问量"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div class="title-big">
      服务器状态监控
    </div>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in serverInfo.serverStatus">
        <div class="serve-box">
          <div class="serve-box__left">
            <div class="serve-box__value" :style="{
              color: item.health >= 80 ? 'red':'green'
              }">{{item.health}}%
            </div>
            <div class="serve-box__ip">{{item.ip}}</div>
            <div class="serve-box__tip">硬盘使用率</div>
          </div>
          <div class="serve-box__right">
            <div class="serve-box__name">{{item.name}}</div>

            <div class="serve-box__progress ">
              <span>CPU</span>
              <div class="myProgress" :class="[{default:item.cpuHealth,danger:!item.cpuHealth}]">
                <div class="myProgress__inner" :style="{width:`${item.cpuOc}%`}"></div>
              </div>
              <span>{{item.cpuOc}}%</span>
            </div>

            <div class="serve-box__progress ">
              <span>MEM</span>
              <div class="myProgress" :class="[{success:item.memHealth,danger:!item.memHealth}]">
                <div class="myProgress__inner" :style="{width:`${item.memOc}%`}"></div>
              </div>
              <span>{{item.memOc}}%</span>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
    <div class="title-big">
      镜像网卡
    </div>
    <el-row :gutter="10">
      <el-col :span="8" v-for="item in serverInfo.mirrorNetworkCardStatus">
        <div class="net-box" :class="[{success:item.health,danger:!item.health}]">
          <div class="net-box__left">
            <div>SPEED</div>
            <div class="net-box__value">{{item.flow}}M/s</div>
            <div>{{getNetworkCardType(item.type)}}</div>
            <div>端口：{{item.port}}</div>
          </div>
          <div class="net-box__right">
            数据量：{{item.dataNum}}G <br>
            错误率：  <span  :style="{
              color: item.speedRate >= 1 ? 'red':'#00b69a',
              fontSize:'16px'
              }">  {{item.speedRate}}%
            </span> <br>
            丢包率：
            <span  :style="{
              color: item.packetLossRate >= 1 ? 'red':'#00b69a',
                 fontSize:'16px'
              }">  {{item.packetLossRate}}%
            </span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/slog/api/slogHotIpApi.js"></script>
  <script src="/static/js/module/tlog/api/tlogAlarmApi.js"></script>
  <script src="/static/js/module/slog/api/slogIllegalSiteApi.js"></script>
  <script src="/static/js/module/slog/api/slogAbnormalIpApi.js"></script>
  <script src="/static/js/module/illegal-monitor/api/moIllegalInfoApi.js"></script>
  <script src="/static/js/module/illegal-monitor/api/moIllegalMediaApi.js"></script>
  <script src="/static/js/module/report-statistics/common/BaseReportApi.js"></script>
  <script src="/static/js/module/report-statistics/api/rIllegalMediaApi.js"></script>
  <script src="/static/js/module/slog/api/slogHotDomainApi.js"></script>
  <script src="/static/js/module/system/api/sysInfoApi.js"></script>
  <script src="/static/js/module/system/api/indexApi.js"></script>
  <script src="/static/js/module/index/index.js"></script>
</div>
</body>
</html>
